<template>
	<view>
		<view class="pb100">
			<view v-show="navActs == 0" class="topsNav p30">
				<view class="top">
					<view class="act">
						送货到家
					</view>
					<view @tap="navActs = 1">
						上门自取
					</view>
				</view>
				<view v-if="!receiverAddress" class="noneAddress bgw" @click="chooseAddress">
					请选择收货地址
					<image src="../../static/image/go.png" mode=""></image>
				</view>
				<view v-else class="Texts1 bgw" @click="chooseAddress">
					<p class="p1">
						<image src="../../static/image/moren@2x.png" v-show="!!receiverAddress?receiverAddress.isDefault:false" mode="">
						</image>
						{{!!receiverAddress?receiverAddress.address:""}}
					</p>
					<p class="p2">
						{{!!receiverAddress?receiverAddress.name:""}} &nbsp;&nbsp;&nbsp; {{!!receiverAddress?receiverAddress.mobile:""}}
					</p>
					<image class="go" src="../../static/image/go.png"  ></image>
				</view>
			</view>
			<view v-show="navActs == 1" class="topsNav p30">
				<view class="top tops">
					<view @tap="navActs = 0">
						送货到家
					</view>
					<view class="act">
						上门自取
					</view>
				</view>
				<view class="Texts1 bgw upDoor">
					<p class="p1">
						{{shippingAddress.address}}
						<view @tap="Gomap()" class="addIcons">
							<image src="../../static/image/daohang@2x.png" mode=""></image>
							<br />
							{{distance?"距您"+distance:"设置默认地址后显示距离"}}

						</view>
					</p>
					<view class="times">
						<view>
							<p>
								自取时间
							</p>
							<p @tap="pickerShow = true">
								{{!!displayTime?displayTime:"请选择"}}
								<image class="image1" src="../../static/image/go.png" mode=""></image>
							</p>
						</view>
						<view>
							<p>
								预留手机号
							</p>
							<p @tap="showModels">
								{{!!mobile?mobile:"请输入"}}
								<image class="image2" src="../../static/image/bianji@2x.png" mode=""></image>
							</p>
						</view>
					</view>
				</view>
			</view>
			<view class="p30">
				<createdGoods :order="order" :orderItems="order.orderItems" :productCreator="order.productCreator"></createdGoods>
			</view> 
			<view class="p30">
				<view class="types p30 bgw">
					<view class="fl">
						<image class="vm" src="../../static/image/zhifu@2x.png" mode=""></image>
						支付方式
					</view>
					<view class="fr">
						线下付款
					</view>
				</view>
			</view>
		</view>
		<view class="bottoms p20">
			<span class="c3">
				共{{order.orderItems?order.orderItems.length:0}}件,
			</span>
			<span>
				合计:
			</span>
			<span class="c2">
				￥{{order.price}}
			</span>
			<view class="bottom fr">

				<u-button @click="createOrder" shape="circle" :ripple="true" type="success">
					确认提交
				</u-button>
			</view>
		</view>
		<models-input @success="setMobile" title='预留手机号' ref="models"></models-input>
		<u-picker mode="multiSelector" v-model="pickerShow" :range="pickerData" :default-selector="defaultPickerArr" @confirm="setTime">
		</u-picker>
	</view>
</template>

<script>
	import {mapServe} from '../../tool/index.js'
	import createdGoods from '@/components/OrderGoods/OrderGoods.vue'
	export default {
		components: {
			createdGoods
		}, 
		data() {
			return {
				productId: 0,
				quantity: 0,
				cartIds: [], 
				pickerData: this.initPickerData(), //自取时间选择数据
				defaultPickerArr: this.defaultPicker(), //默认时间
				time: "", //自取时间
				displayTime: "",
				mobile: "", //预留手机号
				receiverAddress: undefined, //默认地址对象
				shippingAddress: {}, //卖家对象
				distance: "0", //上门自取距离
				order: {},

				navActs: 0,
				addressType: 0,
				pickerShow: false
			};
		},
		onLoad(e) {
			this.productId = e.productId;
			this.quantity = e.quantity;
			this.cartIds = e.cartIds ? e.cartIds.split(",") : [];
		},
		onShow() {
			this.checkout(this.productId, this.quantity, this.cartIds);
		},
		methods: {
			Gomap(){ 
				let shippingAddress = this.shippingAddress
				mapServe(shippingAddress.latitude,shippingAddress.longitude,shippingAddress.address)
			},
			checkout(productId, quantity, cartIds) {
				var params = {}
				if (!!productId) {
					params.productId = productId;
					params.quantity = quantity;
				} else if (!!cartIds) {
					params.cartIds = cartIds;
				}
				this.$common.ajax.postAjax({
					url: this.$common.url.api.checkout,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							var selectAddress = uni.getStorageSync("SelectAddress");
							if (!!selectAddress) {
								this.receiverAddress = selectAddress;
								uni.removeStorage({
									key: "SelectAddress"
								})
							} else {
								var receiverAddress = result.data.defaultReceiver;
								this.receiverAddress = receiverAddress;
								if(!!receiverAddress){
									this.mobile = receiverAddress.mobile;
								}
								this.$forceUpdate()
							}
							this.shippingAddress = result.data.shippingAddress;
							this.order = result.data.order;
							this.distance = result.data.distance;
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~");
					}
				})
			},
			createOrder() {
				if (this.navActs == 0 && !this.receiverAddress) {
					this.$common.msg("请选择收货地址");
					return;
				}
				if (this.navActs == 1 && !this.time) {
					this.$common.msg("请选择自取时间");
					return;
				}
				if (this.navActs == 1 && !this.mobile) {
					this.$common.msg("请输入预留手机号");
					return;
				}
				var params = {}
				params.productId = this.productId;
				params.quantity = this.quantity;
				params.cartIds = [];
				this.cartIds.forEach(function(item, index) {
					params.cartIds[index] = parseInt(item);
				})
				params.shippingMethod = this.navActs == 0 ? false : true;
				params.addressId = this.receiverAddress ? this.receiverAddress.id : null;
				params.arrivalTime = this.time;
				params.reservedMobile = this.mobile;
				this.$common.ajax.postAjax({
					url: this.$common.url.api.createOrder,
					data: params,
					success: res => {
						console.log(res);
						var result = res.data;
						if (result.code == 0) {
							var url = "../OrderType/OrderType";
							this.$common.navigateTo(url);
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~");
					}
				})
			},
			setMobile(mobile) {
				this.mobile = mobile;
			},
			setTime(date) {
				var str = ""
				for (var i = 0; i < 3; i++) {
					str += this.pickerData[i][date[i]];
				}
				this.displayTime = str.replace("时", ":").replace("分", "").replace("周日", "周日 ");

				var time = new Date();
				time.setDate(time.getDate() + date[0]);
				time.setHours(date[1], date[2]);
				var returnTime = "";
				returnTime += time.getFullYear() + "-";
				returnTime += time.getMonth() + 1 < 10 ? "0" + (time.getMonth() + 1) : time.getMonth() + 1;
				returnTime += "-" + (time.getDate() < 10 ? "0" + time.getDate() : time.getDate());
				returnTime += " " + (time.getHours() < 10 ? "0" + time.getHours() : time.getHours());
				returnTime += ":" + (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes());
				console.log(returnTime);
				this.time = returnTime;
			},
			initPickerData() {
				var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				var hours = ["00时", "01时", "02时", "03时", "04时", "05时", "06时", "07时", "08时", "09时"];
				var minutes = ["00分", "01分", "02分", "03分", "04分", "05分", "06分", "07分", "08分", "09分"];
				var weekIndex = new Date().getDay();
				weeks[weekIndex] = "今天";
				var returnWeeks = weeks.slice(weekIndex, weeks.length).concat(weeks.slice(0, weekIndex));
				for (let i = 10; i <= 23; i++) {
					hours[i] = i + "时";
				}
				for (let i = 10; i <= 60; i++) {
					minutes[i] = i + "分";
				}
				return [returnWeeks, hours, minutes];
			},
			defaultPicker() {
				var date = new Date();
				var weeksIndex = 0;
				var hoursIndex = 12;
				var minutesIndex = 0;
				return [weeksIndex, hoursIndex, minutesIndex];
			},
			showModels() {
				this.$refs['models'].show()
			},
			chooseAddress() {
				var url = "../addressList/addressList?tab=" + 0;
				this.$common.navigateTo(url);
			},

		}
	}
</script>

<style lang="less" scoped>
	@import './index.less';
</style>
